<template>
  <div class="message-control-wrap" slot="content">
    <el-form ref="form" :model="form" @submit.native.prevent>
      <el-row :gutter="8">
        <el-col :span="12" v-for="(item, index) in form.controlList">
          <div class="control-block-wrap">
            <title-card :title="item.controlName">
              <el-switch slot="header" v-model="item.status" />
              <div slot="content">
                <div class="control-row-wrap">
                  <span>在</span>
                  <el-form-item
                    style="margin-bottom: 0"
                    :key="item.controlCode"
                    :prop="'controlList.' + index + '.period'"
                    :rules="rules.period"
                  >
                    <common-input-number
                      :max-length="2"
                      style="width: 100px; margin: 0 8px"
                      v-model="item.period"
                    />
                  </el-form-item>
                  <span>分钟内允许接收</span>
                  <el-form-item
                    style="margin-bottom: 0"
                    :prop="'controlList.' + index + '.maxNumber'"
                    :rules="rules.maxNumber"
                  >
                    <common-input-number
                      :max-length="4"
                      style="width: 100px; margin: 0 8px"
                      v-model="item.maxNumber"
                    />
                  </el-form-item>
                  <span>次</span>
                </div>
              </div>
            </title-card>
          </div>
        </el-col>
      </el-row>
      <el-button
        type="primary"
        plain
        @click="saveControlFn"
        :loading="isPersistenceLoading"
        >保存配置</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { listControl, updateControl } from "@/api/system/control";
import BaseList from "@/mixins/BaseList";

export default {
  name: "msgControl",
  mixins: [BaseList],
  data() {
    return {
      isPersistenceLoading: false,
      form: {
        controlList: [],
      },
      rules: {
        period: [
          {
            type: "number",
            min: 1,
            max: 60,
            message: "时间间隔 1-60",
            trigger: "blur",
          },
        ],
        maxNumber: [
          {
            type: "number",
            min: 1,
            max: 10000,
            message: "次数范围 1-9999",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询消息控制列表 */
    getList() {
      this.loading = true;
      listControl(this.queryParams)
        .then((response) => {
          if (response && (response.rescode === 200 || response.code === 200)) {
            this.form.controlList = response.data
              ? response.data.reduce((r, c) => {
                  r.push({
                    ...c,
                    status: c.status === 0,
                  });
                  return r;
                }, [])
              : [];
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    saveControlFn() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let list = this.form.controlList.reduce((r, c) => {
            r.push({
              ...c,
              status: c.status ? 0 : 1,
            });
            return r;
          }, []);
          if (!this.isPersistenceLoading) {
            this.isPersistenceLoading = true;
            updateControl({
              messageControl: JSON.stringify(list),
            })
              .then((response) => {
                if (
                  response &&
                  (response.code === 200 || response.rescode === 200)
                ) {
                  this.$GlobalSuccessMessage("保存成功");
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm(response.msg);
                }
              })
              .finally(() => {
                this.isPersistenceLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.message-control-wrap {
  box-sizing: border-box;

  .control-block-wrap {
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;

    .control-row-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      height: 100px;
    }
  }
}
</style>
